<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>9.对象的扩展——super关键字</title>
	</head>
	<body>
		<script type="text/javascript">
			//九、super关键字
			//我们知道，this关键字总是指向函数所在的当前对象，ES6又新增了另一个类似的关键字super，指向当前对象的原型对象。
			const proto = {
				foo :'hello'
			};
			const obj = {
				find(){
					return super.foo;
				}
			}
			Object.setPrototypeOf(obj,proto)
			console.log(obj.find()) //hello
			//上面代码中，对象obj的find方法之中，通过super.foo引用了原型对象proto的foo属性。
			//注意，super关键字表示原型对象时，只能用在对象的方法之中，用在其他地方都会报错。
			//报错
//			const obj_1 = {
//				foo:super.foo
//			} //Uncaught SyntaxError: 'super' keyword unexpected here
			
			//报错
//			const obj_2 = {
//				foo:() => super.foo
//			} //Uncaught SyntaxError: 'super' keyword unexpected here
			
			//报错
//			const obj_3 = {
//				foo:function(){
//					return super.foo
//				}
//			} //Uncaught SyntaxError: 'super' keyword unexpected here
			//上面三种super的用法都会报错，因为对于 JavaScript 引擎来说，这里的super都没有用在对象的方法之中。第一种写法是super用在属性里面，第二种和第三种写法是super用在一个函数里面，然后赋值给foo属性。目前，只有对象方法的简写法可以让 JavaScript 引擎确认，定义的是对象的方法。
			//JavaScript引擎内部，super.foo等同于Object.getPrototypeOf(this).foo（属性）或Object.getPrototypeOf(this).foo.call(this)（方法）
			const proto_4 = {
				x:'hello',
				foo(){
					console.log(this.x);
				}
			}
			const obj_4 = {
				x:'world',
				foo(){
					super.foo();
				}
			}
			Object.setPrototypeOf(obj_4,proto_4);
			obj_4.foo();  //world
			//上面代码中，super.foo指向原型对象proto_4的foo方法，但是绑定的this却还是当前对象obj_4,因此输出的就是world.
		</script>
	</body>
</html>
